<template>
  <div class="flex justify-end space-x-2 mb-2">
    <span class="p-input-icon-left">
      <i class="pi pi-search" />
      <InputText type="text" v-model="searchValue" placeholder="搜索" class="p-inputtext-sm" />
    </span>
    <div>
      <Button label="搜索" class="p-button-sm" @click="_getUserList()" />
    </div>
  </div>

  <DataTable
    :value="users"
    :resizableColumns="true"
    columnResizeMode="fit"
    showGridlines
    responsiveLayout="scroll"
    class="p-datatable-sm min-h-[688px]"
  >
    <Column field="uid" header="UID"></Column>
    <Column field="username" header="用户名"></Column>
    <Column header="头像">
      <template #body="props">
        <img :src="props.data.avatar + '/thumb'" alt="用户头像" height="48" width="48" />
      </template>
    </Column>
    <Column header="用户角色">
      <template #body="props">
        <Tag
          :value="props.data.role.description"
          :title="props.data.role.name"
          :severity="
    props.data.role.name === 'admin' ? 'danger' :
      (props.data.role.name === 'designer' ? 'success' :
        (props.data.role.name === 'user' ? 'primary' :
          (props.data.role.name === 'supplier' ? 'info' : 'warning')))"
          rounded
        />
      </template>
    </Column>
    <Column field="regtime" header="注册时间" />
    <Column header="用户状态">
      <template #body="props">
        <Tag
          v-if="props.data.role.name === 'admin'"
          value="正常"
          icon="far fa-check fa-fw"
          severity="success"
        />
        <Tag
          v-else-if="props.data.enable"
          value="正常"
          icon="far fa-check fa-fw"
          severity="success"
          @click="changeUserStatusConfirm(props.data.username, props.data.uid, 0)"
          class="cursor-pointer"
        />
        <Tag
          v-else
          value="封禁"
          icon="far fa-times fa-fw"
          severity="danger"
          @click="changeUserStatusConfirm(props.data.username, props.data.uid, 1)"
          class="cursor-pointer"
        />
      </template>
    </Column>
  </DataTable>
  <Paginator :rows="10" :totalRecords="totalRecords" @page="_getUserList($event.page + 1)" />
</template>

<script lang="ts">
export default defineComponent({
  name: 'UserManage',
})
</script>

<script lang="ts" setup>
import { defineComponent, ref } from 'vue'
import { useToast } from 'primevue/usetoast'
import { useConfirm } from 'primevue/useconfirm'
import { changeUserStatus, getUserList } from '@/api/admin/user'

import DataTable from 'primevue/datatable'
import Column from 'primevue/column'
import Tag from 'primevue/tag'
import Paginator from 'primevue/paginator'
import InputText from 'primevue/inputtext'
import Button from 'primevue/button'

let toast = useToast()
let confirm = useConfirm()

const users = ref<any[]>()
const totalRecords = ref(1)
const curPage = ref(1)
const searchValue = ref('')
const keyword = ref<string>()

function changeUserStatusConfirm(username: string, uid: number, enable: number) {
  if (enable) {
    confirm.require({
      message: `确定要解封${username}吗？`,
      header: '解封用户',
      acceptLabel: '确定',
      rejectLabel: '取消',
      icon: 'far fa-user-check',
      acceptClass: 'p-button-primary',
      accept: () => {
        changeUserStatus(uid, enable)
          .then(() => {
            toast.add({ severity: 'success', summary: '解封成功', detail: `已解封${username}`, life: 3000 })
            _getUserList(curPage.value)
          })
          .catch(err => {
            toast.add({ severity: 'error', summary: '解封失败', detail: err.data.msg, life: 3000 })
          })
      }
    })
  } else {
    confirm.require({
      message: `确定要封禁${username}吗？`,
      header: '封禁用户',
      acceptLabel: '确定',
      rejectLabel: '取消',
      icon: 'far fa-user-xmark',
      acceptClass: 'p-button-danger',
      accept: () => {
        changeUserStatus(uid, enable)
          .then(() => {
            toast.add({ severity: 'success', summary: '封禁成功', detail: `已封禁${username}`, life: 3000 })
            _getUserList(curPage.value)
          })
          .catch(err => {
            toast.add({ severity: 'error', summary: '封禁失败', detail: err.data.msg, life: 3000 })
          })
      }
    })
  }
}

function _getUserList(page?: number) {
  let tmpSearchValue = searchValue.value ? searchValue.value : undefined
  getUserList(page ? page : 1, tmpSearchValue)
    .then(res => {
      users.value = res.data.list
      totalRecords.value = res.data.total
      curPage.value = page ? page : 1
      keyword.value = tmpSearchValue
    })
    .catch(err => {
      toast.add({ severity: 'error', summary: '获取用户列表失败', detail: err.data.msg, life: 3000 })
    })
}

_getUserList()
</script>
